<template>
  <div class="app-container">
    <div class="app-container_conter1">
      <div class="app-container_conter1_title">
        出险人信息
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <div class="app-container_form_iitem" style="display: flex;flex-flow: wrap; ">
          <div>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" placeholder="请输入姓名" readonly/>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="报案时间" prop="createTime">
              <el-date-picker clearable size="small"
                              v-model="form.createTime"
                              type="date"
                              format="yyyy-MM-dd"
                              value-format="timestamp"
                              placeholder="选择报案时间">
              </el-date-picker>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="保单号" prop="insure_no">
              <el-input v-model="form.insure_no" placeholder="请输入保单号" readonly/>
            </el-form-item>
          </div>
        </div>
        <div class="app-container_conter1_title">出险人信息</div>
        <div class="app-container_form_iitem" style="display: flex;flex-flow: wrap; ">
          <div>
            <el-form-item label="证件号码" prop="idCardNo">
              <el-input v-model="form.idCardNo" placeholder="请输入证件号码" readonly/>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="劳动合同单位" prop="laborUnit">
              <el-input v-model="form.laborUnit" placeholder="请输入劳动合同单位" readonly/>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="实际用工单位" prop="actualUnit">
              <el-input v-model="form.actualUnit" placeholder="请输入实际用工单位"/>
            </el-form-item>
          </div>
        </div>
        <div class="app-container_conter1_title">出险人信息</div>
        <div class="app-container_form_iitem" style="display: flex;flex-flow: wrap; ">
          <div>
            <el-form-item label="工种名称" prop="industryName">
              <el-input v-model="form.industryName" placeholder="请输入工种名称"/>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="所属地区" prop="area">
              <el-input v-model="form.area" placeholder="请输入所属地区"/>
            </el-form-item>
          </div>
        </div>
        <div class="app-container_conter1_title">出险人信息</div>
        <div class="app-container_form_iitem" style="display: flex;flex-flow: wrap; ">
          <div>
            <el-form-item label="事故时间" prop="accidentTime">
              <el-date-picker clearable size="small"
                              v-model="form.accidentTime"
                              type="date"
                              format="yyyy-MM-dd"
                              value-format="timestamp"
                              placeholder="选择事故时间">
              </el-date-picker>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="事故类型" prop="accident_type">
              <el-select v-model="form.accident_type" placeholder="请选择">
                <el-option
                    v-for="item in accidentType"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="事故地点" prop="accident_area">
              <el-input v-model="form.accident_area" placeholder="请输入事故地点"/>
            </el-form-item>
          </div>
        </div>
        <div class="app-container_conter1_title">伤情信息</div>
        <div class="app-container_form_iitem" style="display: flex;flex-flow: wrap; ">
          <div>
            <el-form-item label="受伤部位" prop="injured_part">
              <el-input v-model="form.injured_part" placeholder="请输入受伤部位"/>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="是否骨折" prop="is_fracture">
              <el-radio-group v-model="form.is_fracture">
                <el-radio
                    v-for="dict in statusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue"
                >{{ dict.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="治疗方式" prop="treatment">
              <el-input v-model="form.treatment" placeholder="请输入治疗方式"/>
            </el-form-item>
          </div>
        </div>
        <div class="app-container_form_iitem" style="display: flex;flex-flow: wrap; ">
          <div>
            <el-form-item label="住院几楼几号床" label-width="130px" prop="number">
              <el-input v-model="form.number" placeholder="请输入住院几号楼几号床"/>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="预估费用" prop="estimateMoney">
              <el-input v-model="form.estimateMoney" placeholder="请输入预估费用"/>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="医院" prop="hospital">
              <el-input v-model="form.hospital" placeholder="请输入医院"/>
            </el-form-item>
          </div>
        </div>
        <div class="app-container_form_iitem" style="display: flex;flex-flow: wrap; ">
          <div style="width: 100%">
            <el-form-item label="受伤经过" prop="description">
              <el-input v-model="form.description" type="textarea" style="width:90%" :rows="5" show-word-limit
                        maxlength="300" placeholder="请输入受伤经过"/>
            </el-form-item>
          </div>
        </div>
        <div class="app-container_form_iitem" style="display: flex;flex-flow: wrap; ">
          <div >
            <el-form-item label="事故现场照片" prop="medical_invoice">
              <div v-if="show"
                   style="width: 150px;height: 150px;line-height: 150px;text-align: center;border: 1px solid #EAC552"
                   @click="getidCard">
                <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;color: #d9d9d9"></i>
              </div>
              <div v-else style="display: flex;flex-flow: wrap;align-items: center;" @click="getidCard">
                <img :src="url+form.medical_invoice" style="margin-right: 5px;margin-bottom: 5px" width="130"
                     height="100px">
              </div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="手持身份证照片" label-width="130px" prop="id_card">
              <div v-if="show1"
                   style="width: 150px;height: 150px;line-height: 150px;text-align: center;border: 1px solid #EAC552"
                   @click="getidCard1">
                <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;color: #d9d9d9"></i>
              </div>
              <div v-else style="display: flex;flex-flow: wrap;align-items: center;" @click="getidCard1">
                <img :src="url+form.id_card" style="margin-right: 5px;margin-bottom: 5px" width="130" height="100px">
              </div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="受伤部位照片" prop="medical_history">
              <div v-if="show2"
                   style="width: 150px;height: 150px;line-height: 150px;text-align: center;border: 1px solid #EAC552"
                   @click="getidCard2">
                <i class="el-icon-plus avatar-uploader-icon" style="font-size: 30px;color: #d9d9d9"></i>
              </div>
              <div v-else style="display: flex;flex-flow: wrap;align-items: center;" @click="getidCard2">
                <img :src="url+form.medical_history" style="margin-right: 5px;margin-bottom: 5px" width="130"
                     height="100px">
              </div>
            </el-form-item>
          </div>
        </div>
        <el-row style="margin: 20px 0">
          <el-col>
            <div style="text-align: center">
              <!--                      <el-button style="width: 150px;background-color: #4AB7BD" type="primary" @click="getCenter('form')">重置-->
              <!--                      </el-button>-->
              <el-button style="width: 150px" type="primary" @click="getSubmit('form')">下一步</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--    事故现场-->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="650px" append-to-body>
      <el-upload
          ref="upload"
          :limit="1"
          action
          :before-upload="beforeUploadForm"
          :auto-upload="false"
          :show-file-list="true"
          :http-request="handleUpdateForm"
          multiple
          :file-list="fileList"
          drag
      >
        <img src="../../../assets/images/Import.png" style="width: 83px;height: 91px;margin: 50px 0;"/>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">仅允许导入“jpg”或“png”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button type="info" @click="upload.open= false">取 消</el-button>
      </div>
    </el-dialog>
    <!--   手持身份证照片-->
    <el-dialog :title="upload1.title" :visible.sync="upload1.open" width="650px" append-to-body>
      <el-upload
          ref="upload1"
          :limit="1"
          action
          :before-upload="beforeUploadForm1"
          :auto-upload="false"
          :show-file-list="true"
          :http-request="handleUpdateForm1"
          multiple
          :file-list="fileList1"
          drag
      >
        <img src="../../../assets/images/Import.png" style="width: 83px;height: 91px;margin: 50px 0;"/>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">仅允许导入“jpg”或“png”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm1">确 定</el-button>
        <el-button type="info" @click="upload1.open= false">取 消</el-button>
      </div>
    </el-dialog>
    <!--  受伤部位照片-->
    <el-dialog :title="upload2.title" :visible.sync="upload2.open" width="650px" append-to-body>
      <el-upload
          ref="upload2"
          :limit="1"
          action
          :before-upload="beforeUploadForm2"
          :auto-upload="false"
          :show-file-list="true"
          :http-request="handleUpdateForm2"
          multiple
          :file-list="fileList2"
          drag
      >
        <img src="../../../assets/images/Import.png" style="width: 83px;height: 91px;margin: 50px 0;"/>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">仅允许导入“jpg”或“png”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm2">确 定</el-button>
        <el-button type="info" @click="upload2.open= false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {listUser, insureUser} from "@/api/insurance/user"
import {addRepordRecord, addRepordRecord1, get_base_industry} from "@/api/insurance/repordRecord"
import {listIndustry} from "@/api/insurance/industry";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getExistInsureNoList} from "@/api/insurance/guarantee";
import {uploadTmage1} from "@/api/base/template";

export default {
  name: "applicationAdd",
  data() {
    return {
      url: process.env.VUE_APP_BASE_API,//地址
      show: true,//判断上传图片显示隐藏
      show1: true,//判断上传图片显示隐藏
      show2: true,//判断上传图片显示隐藏
      value: '',
      //上传身份证
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
      },
      upload1: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
      },
      upload2: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
      },
      // 职业分类树选项
      industryOptions: [],
      // 报案表格数据
      repordRecordList: [],
      //投保用户
      // InsuredUsers: [],
      active: 0,//步骤条
      // 状态字典
      statusOptions: [
        {
          dictValue: 0,
          dictLabel: '否'
        },
        {
          dictValue: 1,
          dictLabel: '是'
        }
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        idCardNo: null,
      },
      // 表单参数
      form: {
        name: '',//  保单用户姓名
        createTime: '',//报案时间
        insureId: '',//保单id
        insure_no: '',//保单号
        insUserId: '',//保单用户id
        idCardNo: '',//保单用户证件号码
        laborUnit: '',//劳动合同单位
        actualUnit: '',//实际用工单位
        industryName: '',//工种名称
        area: '',//所属地区
        accidentTime: '',//事故时间
        accident_type: '',//事故类型
        accident_area: '',//事故地点
        injured_part: '',//受伤部位
        is_fracture: '',// 是否骨折 0否 1是
        treatment: '',//治疗方式
        number: '',//住院几楼几号床
        estimateMoney: '',//预估金额
        hospital: '',//医院
        description: '', //事故描述经过
        user_id: '',//操作人id
        medical_invoice: '',//事故现场照片
        id_card: '',//手持身份证照片
        medical_history: '',//受伤部位照片
        // insureId: null,//保单id
        // id: null,
        // insUserId: '',//用户id
        // name: null,//姓名1
        // actualUnit: null,//实际用工单位2
        // laborUnit: null,//劳动合同单位3
        // // businessUnit: null,//业务来源单位4
        // accidentTime: null,//事故发生时间5
        // industryId: null,//工种6
        // description: null,//事情经过7
        // industryName: null,//工种名称8
        // estimateMoney: null,//预估金额单位（元）9
        // createTime: null,
        // updateTime: null,
        // remark: null,//备注
        // idCardNo: null,//证件号码10
        // status: "",
        // businesslicense:'',//营业执照
        // accident_type:'',//事故类型 1，2，3，4，5 赔偿金额
      },
      // 表单校验
      rules: {
        // userId: [
        //   {required: true, message: '请选择投保证件号', trigger: 'change'}
        // ],
        name: [
          {required: true, message: '请输入用户名', trigger: 'blue'}
        ],
        insure_no: [
          {required: true, message: '请输入保单号', trigger: 'blue'}
        ],
        createTime: [
          {type: 'date', required: true, message: '请选择报案时间', trigger: 'change'}
        ],
        idCardNo: [
          {required: true, message: '请输入证件号码', trigger: 'blue'}
        ],
        laborUnit: [
          {required: true, message: '请输入劳动合同单位', trigger: 'blue'}
        ],
        actualUnit: [
          {required: true, message: '请输入实际用工单位', trigger: 'blue'}
        ],
        industryName: [
          {required: true, message: '请输入工种名称', trigger: 'blue'}
        ],
        area: [
          {required: true, message: '请输入所属地区', trigger: 'blue'}
        ],
        accidentTime: [
          {type: 'date', required: true, message: '请选择事故时间', trigger: 'change'}
        ],
        accident_type: [
          {required: true, message: '请选择事故类型', trigger: 'change'}
        ],
        accident_area: [
          {required: true, message: '请输入事故地点', trigger: 'blue'}
        ],
        injured_part: [
          {required: true, message: '请输入受伤部位', trigger: 'blue'}
        ],
        is_fracture: [
          {required: true, message: '请选择是否骨折', trigger: 'change'}
        ],
        treatment: [
          {required: true, message: '请输入食疗方式', trigger: 'blue'}
        ],
        number: [
          {required: true, message: '请输入住院几楼几号床', trigger: 'blue'}
        ],
        estimateMoney: [
          {required: true, message: '请输入预估金额', trigger: 'blue'}
        ],
        hospital: [
          {required: true, message: '请输入医院', trigger: 'blue'}
        ],
        description: [
          {required: true, message: '请输入受伤经过', trigger: 'blue'}
        ],
        medical_invoice: [
          {required: true, message: '上传事故现场照片', trigger: 'blue'}
        ],
        id_card: [
          {required: true, message: '上传手持身份证照片', trigger: 'blue'}
        ],
        medical_history: [
          {required: true, message: '上传受伤部位照片', trigger: 'blue'}
        ],
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      accidentType: [],//事故类型


    }
  },
  components: {
    Treeselect
  },
  methods: {
    getidCard() {
      this.upload.open = true;
      this.upload.title = "上传事故现场照片"
    },
    getidCard1() {
      this.upload1.open = true;
      this.upload1.title = "上传手持身份证"
    },
    getidCard2() {
      this.upload2.open = true;
      this.upload2.title = "上传受伤部位"
    },
    //表单清空
    resule() {
      this.form = {
        medical_invoice: '',//事故现场照片
        id_card: '',//手持身份证照片
        medical_history: '',//受伤部位照片
        name: '',//  保单用户姓名
        createTime: '',//报案时间
        insureId: '',//保单id
        insUserId: '',//保单用户id
        insure_no: '',//保单号
        idCardNo: '',//保单用户证件号码
        laborUnit: '',//劳动合同单位
        actualUnit: '',//实际用工单位
        industryName: '',//工种名称
        area: '',//所属地区
        accidentTime: '',//事故时间
        accident_type: '',//事故类型
        accident_area: '',//事故地点
        injured_part: '',//受伤部位
        is_fracture: '',// 是否骨折 0否 1是
        treatment: '',//治疗方式
        number: '',//住院几楼几号床
        estimateMoney: '',//预估金额
        hospital: '',//医院
        description: '', //事故描述经过
        user_id: '',//操作人id
      }
    },
    //选择工种名称
    selectDepart(e) {
      this.form.industryName = e.name
    },
    //返回上一页
    getBack() {
      this.$router.back(-1);
    },
    //重置数据
    getCenter(form) {
      this.$refs[form].resetFields();
    },
    //提价数据
    getSubmit(form) {
      console.log('form', this.form)
      this.$refs[form].validate((valid) => {
        if (valid) {
          // console.log('form', this.form);
          addRepordRecord1(this.form).then(res => {
            console.log('报案res', res)
            if (res.code == 1) {
              this.$message({
                message: res.msg,
                type: 'success'
              });

              this.$router.push({
                path: '/business/repordRecord/repordImage',
                query: {
                  id: res.data
                }
              })
            }
          })
          //   addRepordRecord(this.form).then(res => {
          //     console.log('添加成功', res)
          //     this.$message({
          //       message: res.msg,
          //       type: 'success'
          //     });

          // this.$router.push({
          //   path: '/business/repordRecord/repordImage',
          //   query: {
          //     id: res.data
          //   }
          // })
          // })

        }
      })
    },
    getNav(item) {
      this.form.name = item.name;
      this.form.idCardNo = item.idCardNo;
      this.form.industryName = item.industryName;
      // this.form.actualUnit=item.
      // console.log('item', item)
    },
    /** 转换职业分类数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      get_base_industry().then(response => {
        // console.log('response职业',response)
        this.industryOptions = [];
        const data = {id: 0, name: '顶级节点', children: []};
        data.children = this.handleTree(response.data, "id", "parent_id");
        this.industryOptions.push(data);
      })
      // listIndustry().then(response => {
      //   this.industryOptions = [];
      //   const data = {id: 0, name: '顶级节点', children: []};
      //   data.children = this.handleTree(response.data, "id", "parentId");
      //   this.industryOptions.push(data);
      //   console.log('工种名称', response);
      //   console.log('industryOptions', this.industryOptions);
      // });
    },
    // 上传事故现场
    beforeUploadForm(file) {
      // console.log('file12', file)
      const isPng = file.type === 'image/png' || 'image/jpg' || 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPng) {
        this.$message.error('上传营业执照只能是png/jpg/jpeg格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传营业执照大小不能超过2MB!');
      }
      return isPng && isLt2M;
    },
    //上传事故现场
    handleUpdateForm(param) {
      // console.log('param', param)
      this.fileList = [];
      this.fileList.push(param.file);
      // console.log('fileListdf', this.fileList)
    },
    submitFileForm() {
      this.$refs.upload.submit();
      let that = this;
      let formData = new FormData();
      this.fileList.forEach(v => {
        formData.append('files', v);
      })

      uploadTmage1(formData).then(response => {
        // console.log('res', response)
        this.fileList = [];
        // this.urlImage = response.url;
        this.form.medical_invoice = response.fileName[0]
        // this.formData.seal = response.fileName;
        if (this.form.medical_invoice != '') {
          this.show = false;
        } else {
          this.show = true;
        }
        this.upload.open = false


      })
    },
    // 手持身份证照片
    beforeUploadForm1(file) {
      // console.log('file12', file)
      const isPng = file.type === 'image/png' || 'image/jpg' || 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPng) {
        this.$message.error('上传营业执照只能是png/jpg/jpeg格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传营业执照大小不能超过2MB!');
      }
      return isPng && isLt2M;
    },
    //上传事故现场
    handleUpdateForm1(param) {
      // console.log('param', param)
      this.fileList1 = [];
      this.fileList1.push(param.file);
      // console.log('fileListdf', this.fileList)
    },
    submitFileForm1() {
      this.$refs.upload1.submit();
      let that = this;
      let formData = new FormData();
      this.fileList1.forEach(v => {
        formData.append('files', v);
      })

      uploadTmage1(formData).then(response => {
        // console.log('res', response)
        this.fileList1 = [];
        // this.urlImage = response.url;
        this.form.id_card = response.fileName[0]
        // this.formData.seal = response.fileName;
        if (this.form.id_card != '') {
          this.show1 = false;
        } else {
          this.show1 = true;
        }
        this.upload1.open = false
      })
    },
    // 手持受伤部位照片
    beforeUploadForm2(file) {
      // console.log('file12', file)
      const isPng = file.type === 'image/png' || 'image/jpg' || 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isPng) {
        this.$message.error('上传营业执照只能是png/jpg/jpeg格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传营业执照大小不能超过2MB!');
      }
      return isPng && isLt2M;
    },
    //上传受伤部位照片
    handleUpdateForm2(param) {
      // console.log('param', param)
      this.fileList2 = [];
      this.fileList2.push(param.file);
      // console.log('fileListdf', this.fileList)
    },
    submitFileForm2() {
      this.$refs.upload2.submit();
      let that = this;
      let formData = new FormData();
      this.fileList2.forEach(v => {
        formData.append('files', v);
      })

      uploadTmage1(formData).then(response => {
        // console.log('res', response)
        this.fileList2 = [];
        // this.urlImage = response.url;
        this.form.medical_history = response.fileName[0]
        // this.formData.seal = response.fileName;
        if (this.form.medical_history != '') {
          this.show2 = false;
        } else {
          this.show2 = true;
        }
        this.upload2.open = false
      })
    },


  },
  created() {
    //调用清空表单
    this.resule();
    var infoUser = this.$route.query.insureUser;
    this.form.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
    console.log('infoUser', infoUser)
    if (infoUser != undefined) {
      this.form.insureId = infoUser.insure_id;
      this.form.insUserId = infoUser.id;
      this.form.name = infoUser.name;
      // this.form.industryName = infoUser.industry_name;
      this.form.businessUnit = infoUser.insureEli.name1;
      this.form.idCardNo = infoUser.id_card_no;
      this.form.insure_no = infoUser.insureEli.insure_no;
      this.form.laborUnit = infoUser.insureEli.name2;
      this.form.industryId = infoUser.industry_id;
      // console.log('form', this.form)
      var id = {
        insureId: this.form.insureId
      }
      this.getTreeselect();
      // insureUser(id).then(res => {
      //   this.InsuredUsers = res.data;
      //   // var info=res.data
      //   // this.form.name=info.name1
      //   // this.form.actualUnit=info.
      //   // console.log('res', res)
      // })
    }

    // this.getDicts("common_status").then(response => {
    //   this.statusOptions = response.data;
    // });
    this.getDicts("accident_type").then(response => {
      // console.log('事故类型',response);
      this.accidentType = response.data;
    });

  }
}
</script>

<style scoped lang="scss">
.app-container_conter1 {
  background: #F8FBFF;
  padding-bottom: 30px;
  border-radius: 10px;
  box-sizing: border-box;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #1F1F1F;

  .app-container_conter1_title {
    font-size: 18px;
    padding: 20px;
    border-bottom: 1px solid #D1D1D1;
    //background: pink;
  }
}

.el-form {
  /*background-color: pink;*/
  //width: 1200px;
  margin: 0 auto;
}

.app-container_form_iitem {
  display: flex;
  flex-flow: wrap;
  margin-top: 20px;

  div {
    min-width: 30%;
    //background: pink;
    margin-right: 5px;

    .el-input {
      min-width: 200px;
    }
  }

}

.el-row {
  padding: 0 40px;
}

.el-input {
  width: 250px;
}
</style>
